body {
  margin: 0px;
}

.ani01 {
  text-decoration: none;
  color: #ff0000;
  /* transition:过渡动画 第一个参数表示什么样式有过渡效果，
  第二个参数是过渡的时间长度，第三个参数（可选）过渡的时间曲线
  color 2s ease-in-out表示color样式变化时使用两秒的过渡
   */
  transition: color 2s ease-in-out;
}

.ani01:hover {
  color: #0000ff;
}

.ani02 {
  border: 1px solid #ff0000;
  width: 10rem;
  text-align: center;
  transition: width 2s;
}

.ani02:hover {
  width: 15rem;
}

.ani03 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 8rem;
  text-align: center;
  /* all表示所有样式 */
  transition: all 2s;
}

.ani03:hover {
  width: 15rem;
  height: 12rem;
}

.ani04 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 8rem;
  text-align: center;
}

.ani04:hover {
  animation: kf01 2s;
}

/* 
@keyframes定义关键帧动画，后面是动画名称
 */
@keyframes kf01 {
  /* 
    0%是动画进度的百分比{
      进度到达时元素的样式
    }
   */
  0% {
    width: 10rem;
    height: 8rem;
  }
  100% {
    width: 15rem;
    height: 10rem;
  }
}

.ani05 {
  border: 1px solid #ff0000;
  width: 10rem;
  height: 8rem;
  text-align: center;
}

.ani05:hover {
  animation: kf02 2s;
}

@keyframes kf02 {
  /* from */
  0% {
    width: 10rem;
    height: 8rem;
  }
  50% {
    width: 15rem;
    height: 8rem;
  }
  /* to */
  100% {
    width: 15rem;
    height: 10rem;
  }
}

.ani06 {
  animation: kf03 5s infinite;
}

@keyframes kf03 {
  0% {
    text-shadow: 0px 0px 0px #ff0000;
  }
  30% {
    font-size: 0.8rem;
  }
  50% {
    text-shadow: 0px 0px 10px #ff0000;
    font-size: 1.6rem;
  }
  70% {
    font-size: 1rem;
  }
  100% {
    text-shadow: 0px 0px 0px #ff0000;
  }
}
